<template>
  <el-dialog :model-value="isShow" width="30%" :before-close="close">
    <template #title>
      <div class="f-dialog-title"><img src="../../assets/imgs/icon_sigh.png" /> 提示</div>
    </template>
    <span>这是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="eventCancel" size="small">取 消</el-button>
        <el-button type="primary" size="small">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'Popup',
  emits: ['cancel'],
  props: {
    isShow: {
      default: true
    }
  },
  setup(props, context) {
    const state = reactive({})
    const eventCancel = () => {
      context.emit('cancel', false)
    }
    const close = () => {}
    return {
      ...toRefs(state),
      eventCancel,
      close
    }
  }
}
</script>

<style lang="less">
.el-dialog {
  border-radius: 12px;
}
.el-dialog__header {
  padding: 20px 0 10px;
  margin: 0 20px;
  border-bottom: 1px solid #e2e2e2;
}
.f-dialog-title {
  line-height: 26px;
}
.f-dialog-title img {
  display: block;
  float: left;
  margin-right: 12px;
}
</style>
